tesseract/showcases/web-kitchensink-reactnext/src/pages/[...url].tsx

import type {GetStaticPaths, GetStaticProps, NextPage} from 'next';
import * as fs from 'fs/promises';
import * as path from 'path';
import * as React from 'react'
import {useRouter} from 'next/router';
import ReactMarkdown from 'react-markdown';
import {DocsLayout, Page} from '@/components/DocsLayout';

export interface Props {
  componentPages: { name: string; components: Page[] }[],
  docsPages: Page[],
  examplePages: Page[],
  markdown: string,
}

const InnerPage: NextPage<Props> = ({
  componentPages,
  examplePages,
  docsPages,
  markdown,
}) => {
  const router = useRouter();
  const sidebarOpen = router.query.open === 'sidebar';

  return (
    <DocsLayout
      componentPages={componentPages}
      examplePages={examplePages}
      docsPages={docsPages}
      sidebarOpen={sidebarOpen}
    >
      {markdown && (
        <ReactMarkdown
          className="my-12 leading-loose"
          components={{
            ul: ({node, ordered: _ordered, ...props}) => (
              <ul
                {...props}
                className="list-disc pl-4"
              />
            ),
            li: ({node, ...props}) => (
              <li
                {...props}
                className="list-item pl-4"
              />
            ),
          }}
        >
          {markdown}
        </ReactMarkdown>
      )}
      <pre>
        <code>
          {JSON.stringify(componentPages, null, 2)}
        </code>
      </pre>
    </DocsLayout>
  )
}

export const getStaticProps: GetStaticProps = async (ctx) => {
  const { params } = ctx;
  const { url } = params as { url: string[] };
  const [platform, framework, ...etcUrl] = url;

  const props = {} as Record<string, unknown>;

  const docsPath = path.resolve('../../docs');
  const docs = await fs.readdir(docsPath);
  props.docsPages = docs.map((d) => ({
    id: d,
    href: `/docs/${d}`,
    label: d
      .split('-')
      .slice(1)
      .map((dd) => dd.slice(0, 1).toUpperCase() + dd.slice(1))
      .join(' ')
      .replace(/\.md/i, '')
  }));

  // const categoriesPath = path.resolve('../../categories');
  // const categories = await fs.readdir(categoriesPath);
  // props.componentPages = categories.map((c) => ({
  //   id: c,
  //   href: `/categories/${c}`,
  //   label: c.split('-').map((cc) => cc.slice(0, 1).toUpperCase() + cc.slice(1)).join(' '),
  // }));

  // const pagesPath = path.resolve('src/pages');
  // const examplesPath = path.resolve(pagesPath, 'examples');
  // const examplesRaw = await fs.readdir(examplesPath);
  // const examplesIndexPage = await Promise.all(
  //   examplesRaw.map(async (c) => {
  //     const indexPath = await path.resolve(examplesPath, c, 'index.tsx');
  //     try {
  //       const statResult = await fs.stat(indexPath);
  //       return [c, statResult.isFile()];
  //     } catch {
  //       // noop
  //     }
  //
  //     return [c, false];
  //   })
  // ) as [string, boolean][];
  // const examples = examplesIndexPage
  //   .filter(([, hasIndexPage]) => hasIndexPage)
  //   .map(([key]) => key);
  // props.examplePages = examples.map((e) => ({
  //   id: e,
  //   href: `/examples/${e}`,
  //   label: e.split('-').map((ee) => ee.slice(0, 1).toUpperCase() + ee.slice(1)).join(' '),
  // }));

  const isHome = !Array.isArray(params.url);
  if (isHome) {
    const readmePath = path.resolve('../../README.md');
    props.markdown = await fs.readFile(readmePath, 'utf-8');
  }

  const theParamsUrl = params.url as string[];
  const isDocs = Array.isArray(theParamsUrl) && theParamsUrl[0] === 'docs';
  if (isDocs) {
    const docsPath = path.resolve('../../docs', theParamsUrl[1] as string);
    props.markdown = await fs.readFile(docsPath, 'utf-8');
  }

  const typedocData = await fs.readFile('typedoc.data.json', 'utf-8');
  const project = JSON.parse(typedocData) as any;

  props.componentPages = project.children.reduce(
    (theComponents, pkg) => {
      const packageNameFragments = pkg.name.split('-');
      const packageFramework = packageNameFragments.pop();
      const categoryBaseName = packageNameFragments.pop();

      console.log(packageFramework, categoryBaseName);

      if (theComponents.some((c) => c.name === categoryBaseName)) {
        return theComponents.map((cc) => {
          if (cc.name !== categoryBaseName) {
            return cc;
          }

          let components = [];
          if (packageFramework === 'react') {
            components = pkg.children
              .filter((exported) => {
                return exported.kind === 64; // Function, these are react components
              })
              .map((component) => {
                return {
                  ...component,
                  id: component.name,
                  href: `/categories/${categoryBaseName}/${component.name}`,
                  label: component.name,
                  descriptionMarkdown: component.signatures[0].comment.summary.reduce(
                    (theText, t) => {
                      if (t.kind === 'text') {
                        return `${theText}${t.text}`;
                      }
                      if (t.kind === 'inline-tag' && t.tag === '@link') {
                        return `${theText}[${t.text}](#)` // TODO set URL
                      }
                      return theText;
                    },
                    ''
                  ),
                };
              });
          }

          return {
            ...cc,
            name: categoryBaseName,
            packages: {
              ...(cc.packages ?? {}),
              [packageFramework]: {
                components,
              },
            },
          };
        })
      }

      let components = [];
      if (packageFramework === 'react') {
        components = pkg.children
          .filter((exported) => {
            return exported.kind === 64; // Function, these are react components
          })
          .map((component) => {
            return {
              ...component,
              id: component.name,
              href: `/categories/${categoryBaseName}/${component.name}`,
              label: component.name,
              descriptionMarkdown: component.signatures[0].comment.summary.reduce(
                (theText, t) => {
                  if (t.kind === 'text') {
                    return `${theText}${t.text}`;
                  }
                  if (t.kind === 'inline-tag' && t.tag === '@link') {
                    return `${theText}[${t.text}](#)` // TODO set URL
                  }
                  return theText;
                },
                ''
              ),
            };
          });
      }

      return [
        ...theComponents,
        {
          name: categoryBaseName,
          packages: {
            [packageFramework]: {
              components,
            }
          }
        }
      ]
    },
    [],
  );

  return {
    props,
  };
};

export default InnerPage;

export const getStaticPaths: GetStaticPaths = async () => {
  const docsPath = path.resolve('../../docs');
  const docs = await fs.readdir(docsPath);

  const categoriesPath = path.resolve('../../categories');
  const categories = await fs.readdir(categoriesPath);

  return {
    paths: [
      ...docs.map((d) => `/docs/${d}`),
    ],
    fallback: true,
  };
};